vue3 使用vant |
您所在的位置：网站首页 › vant-picker指定 value-key › vue3 使用vant |
vue3 使用vant
|
vue3 使用vant-picker封装省市二级联动，设置默认值
怕什么真理无穷，进一步有进一步的欢喜呀，不得不承认的就是，兴趣和擅长是一个良性迭代的循环啊，你擅长某件事情，就会越喜欢它，越喜欢，就越愿意花时间，进而越擅长。所以代码码起来吧哈哈哈 近期用上了vue3，还顺手写了个小需求，用vant-picker封装一个省市的二级联动，并且在从后端接口获取省市的数据，点开弹出框需要展示默认的选项，比如点击广东省-深圳市输入框，弹出的picker级联选择器需要默认广东 -深圳。如下图：
vant官网中，地区联动的形式是这样的 然后对数据做了处理，处理成官网的形式，这样就可以联动了 const columnsData = chinaAreaDataType.map((item, index) => { const children: { text: string }[] = [] item.citys.forEach((item) => { children.push({ text: item.cityName, }) }) return { text: item.provinceName, children } })其中关于一些vue3父子组件的传值就不过多赘述了，有需要可自行查看官方文档 接下来说一说，点开弹出框需要展示默认的选项怎么实现的吧，此处，vant官网给出了一个api，不过没有使用示例，捣鼓了半天。 你以为这样就结束了吗，no no no,还要在popup 中设置lazy-render为false，这样就结束拉~ 好吧废话不多说，上子组件代码 子组件代码PickerArea {{ title }} import { defineComponent, ref, toRef, watch, reactive, onMounted } from 'vue' import { Popup, Picker, Field } from 'vant' import chinaAreaDataType from './chinaAreaData.json' export default defineComponent({ name: 'TasPickerArea', components: { [Picker.name]: Picker, [Popup.name]: Popup, [Field.name]: Field, }, props: { areaValue: { type: String, default: '', }, show: { type: Boolean, default: false, }, showDatePicker: { type: Boolean, default: false, }, title: { type: String, default: '请选择地区', }, }, setup(props, { emit }) { const refShowOverlay = ref(false) const computedShowOverlay = toRef(props, 'showDatePicker') const areaPicker = ref() const handleCancelArea = () => { emit('close', false) } const columnsData = chinaAreaDataType.map((item, index) => { const children: { text: string }[] = [] item.citys.forEach((item) => { children.push({ text: item.cityName, }) }) return { text: item.provinceName, children } }) const handleChangeArea = (area: Array emit('change-area', area) } const handleConfirmArea = (area: Array emit('confirm-area', area) handleCancelArea() } watch(computedShowOverlay, (nV) => { refShowOverlay.value = nV }) onMounted(() => { const cityName = toRef(props, 'areaValue').value.split('-') const findProvinceName = columnsData.findIndex((value) => value.text === cityName[0]) const findCityName = columnsData[findProvinceName].children.findIndex((value) => value.text === cityName[1]) areaPicker.value?.setIndexes([findProvinceName, findCityName]) }) return { refShowOverlay, areaPicker, columnsData, handleChangeArea, handleCancelArea, handleConfirmArea, } }, })父组件代码 import { computed, defineComponent, ref, watch, reactive, toRefs } from 'vue' import { Field } from 'vant' import { px2remWithUnit } from '@/utils/ui' import { getThemeVarValue } from '@/config/ui' import { showDialog } from './components/TasDialog/dialog' import TasPickerChinaArea from '@/components/TasPickerChinaArea/index.vue' export default defineComponent({ name: 'TasButton', components: { [Field.name]: Field, TasPickerChinaArea, }, setup() { const show = ref(false) const refShowDatePicker = ref(true) const areaValue = ref('广东省-深圳市') const handleClickOFF = () => { show.value = !show.value } const handleConfirmArea = (area: Array areaValue.value = `${area[0].text} - ${area[1].text}` } const handleChangeArea = (area: Array} return { show, areaValue, refShowDatePicker, handleClickOFF, handleConfirmArea, handleChangeArea, } }, })css代码 .container { overflow: hidden; &::v-deep(.van-picker-column) { font-size: 32px; } ::v-deep(.van-picker__toolbar) { height: auto; padding: 30px 45px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } } .icon--button img { width: 52px; } .title { font-size: 32px; font-weight: 500; color: #000000; line-height: 45px; }如有不妥之处，还请大佬指出~ |
好，那么话不多说，接下来一步一步来实现。 首先，项目中引入vant-ui
而我的数据格式是这样的
使用setIndexes设置获取到的索引值，就可以实现点开弹出框需要展示默认的选项了，在onMounted中通过ref去设置相应的索引即可。【本文地址】
今日新闻 |
推荐新闻 |